<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>勾寄子 - 上传一键部署</title>
    <link
        rel="stylesheet"
        href="/public/ele-plus.css"
    />
    <!-- Import Vue 3 -->
    <script src="/public/vue3.js"></script>
    <!-- Import component library -->
    <script src="/public/ele-plus.js"></script>
    <script src="/public/ele-plus-icon.js"></script>
    <style>
        #app {

        }
        .title {
            width: 100%;
            text-align: center;
            margin-top: 15vh;
            font-size: xx-large;
            font-weight: 700;
            color: #333;
        }
        .subtitle {
            width: 100%;
            text-align: center;
            font-size: larger;
            font-weight: 300;
            margin-top: 20px;
        }
        .upload {
            width: 50%;
            margin-left: 25%;
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .el-upload {
            width: 100%;
        }
        .button {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            margin-top: 50px;
        }
        .tip {
            width: 50%;
            margin-left: 25%;
            display: flex;
            flex-direction: column;
            margin-top: 20px;
        }
        .tip-title {
            font-size: medium;
            font-weight: 700;
        }
        .tip-row {
            font-size: smaller;
            color: #666;
        }
        .tip-row::before {
            content: '· ';
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="title">勾寄子一键上传部署</div>
        <div class="subtitle">只需要上传，然后就能在线上访问</div>
        <el-upload
            class="upload"
            drag
            action="/upload"
            :show-file-list="false"
            accept="application/zip"
            :on-success="handleSuccess"
            :on-error="handleError">
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">
                    把文件拖进来或者 <em>点击上传</em>
                </div>
                <template #tip>
                    <div class="el-upload__tip">
                        <div>上传 .zip 的压缩包会自动解压缩</div>
                    </div>
                </template>
        </el-upload>
        <div class="tip">
            <div class="tip-title">使用方法</div>
            <div class="tip-row">执行 vue 构建： <span class="code">npm run build</span> </div>
            <div class="tip-row">把  <span class="code">dist</span> 目录打个 zip 压缩包，传上来 </div>
        </div>
        <div class="button">
            <el-tooltip
                class="box-item"
                effect="dark"
                placement="left-start">
                <template #content>
                    <div>最后上传时间：我忘了哥，你自己不记得吗</div>
                    <div>当前前台网址：@{url}</div>
                </template>
                <el-button size="large" @click="handleOpenWebsite">打开网站</el-button>
            </el-tooltip>
        </el-button>
            <el-button type="primary" size="large" @click="handleUpload">上传他妈的</el-button>
        </div>
    </div>
    <script>
        const { createApp, ref } = Vue
        const app = createApp({
            setup() {
                const url = ref('http://goujizi.thebestxt.cc')


                const handleError = (res, file, files) => {
                    ElementPlus.ElMessage.error('这个不能传啊兄弟')
                }
                const handleSuccess = (res, file, files) => {
                    console.log('on success', res, file, files)
                    if (res.code == 200) {
                        ElementPlus.ElMessageBox.confirm(
                            `<div>${res.msg}</div><div>上传完了，直接打开看看？</div>`,
                            '贼牛逼啊我的哥',
                            {
                                confirmButtonText: '行啊',
                                cancelButtonText: '拉倒吧',
                                type: 'success',
                                dangerouslyUseHTMLString: true,
                            }
                        )
                            .then(() => {
                                handleOpenWebsite()
                            })
                            .catch(() => {
                                ElementPlus.ElMessage({
                                    type: 'info',
                                    message: '行哥',
                                })
                            })
                    } else {
                        ElementPlus.ElMessage.error(res.msg)
                    }
                }
                const handleUpload = () => {
                    ElementPlus.ElMessage.warning('不用点按钮，你选了文件就自动传了')
                }
                const handleOpenWebsite = () => {
                    window.open(url.value)
                }
                return {
                    url,
                    handleError,
                    handleSuccess,
                    handleUpload,
                    handleOpenWebsite
                }
            }
        })
        console.log(app.config)
        app.config.compilerOptions.delimiters = ['@{', '}']
        app.use(ElementPlus)
        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
            app.component(key, component)
        }
        app.mount('#app')
    </script>
</body>
</html>